import React from 'react';
import classNames from 'classnames';

export type ButtonType = 'default' | 'primary' | 'warning' | 'danger' | 'link';
export type ButtonSize = 'lg' | 'sm';

export interface BaseButtonProps {
  className?: string;
  disabled?: boolean;
  btnType?: ButtonType;
  size?: ButtonSize;
  href?: string;
  children?: React.ReactNode;
}

// button 本身具有的属性
type NativeButtonProps = BaseButtonProps &
  React.ButtonHTMLAttributes<HTMLButtonElement>;
// a标签 本身具有的属性
type AnchorButtonProps = BaseButtonProps &
  React.AnchorHTMLAttributes<HTMLAnchorElement>;
// Partial 将交叉类型的属性全部变为可选的
export type ButtonProps = Partial<NativeButtonProps & AnchorButtonProps>;

const Button: React.FC<ButtonProps> = (props) => {
  const {
    disabled,
    btnType = 'default',
    size,
    children,
    href,
    className,
    ...restProp
  } = props;

  const classes = classNames('btn', className, {
    [`btn-${btnType}`]: btnType,
    [`btn-${size}`]: size,
    disabled: btnType === 'link' && disabled,
  });
  // Link类型的button
  if (btnType === 'link') {
    return (
      <a href={href} className={classes} {...restProp}>
        {children}
      </a>
    );
  }
  return (
    <button className={classes} disabled={disabled} {...restProp}>
      {children}
    </button>
  );
};

export default Button;
